<template>
	<el-container>
		<el-header>
			 <el-page-header icon="sc-icon-Project" title="项目概况" @back="goBack" content="哪些年，我经历的项目...(持续更新中)">
			 </el-page-header>
			<el-button type="primary" round @click="goIn">项目实例</el-button>
		</el-header>
		<el-main >
			<el-row>
				<el-col :span="6">
				<div class="grid-content ep-bg-purple" >
					<el-divider>
						<el-icon size="50">
								 <sc-icon-Police  />
						</el-icon>
						<label class="t_label">智慧安全方向</label>
					</el-divider>
					
					  <el-timeline>
						<el-timeline-item center
							v-for="(activity, index) in polices"
							:key="index"
							:type="success"
							color="#0bbd87"
							size="large"
							:timestamp="activity.intro"
							>
							<div class="activity_content">
								<el-link type="primary" :href="activity.href">{{ activity.name}}</el-link>
							</div>
							
						</el-timeline-item>
					</el-timeline>
				</div>
				</el-col>
				<el-col :span="6">
				<div class="grid-content ep-bg-purple-light" >
					<el-divider>
						<el-icon size="50">
								 <sc-icon-Health  />
						</el-icon>
						<label class="t_label">健康云大数据</label>
					</el-divider>
					
					  <el-timeline>
						<el-timeline-item center
							v-for="(activity, index) in healths"
							:key="index"
							:type="success"
							color="#0bbd87"
							size="large"
							:timestamp="activity.intro"
							>
							<div class="activity_content">
								<el-link type="primary" :href="activity.href">{{ activity.name}}</el-link>
							</div>
							
						</el-timeline-item>
					</el-timeline>
				</div>  
				</el-col>
				<el-col :span="6">
				<div class="grid-content ep-bg-purple-light" >
					<el-divider>
						<el-icon size="50">
								 <sc-icon-Traffic  />
						</el-icon>
						<label class="t_label">智慧公共交通</label>
					</el-divider>
					
					  <el-timeline>
						<el-timeline-item center
							v-for="(activity, index) in traffices"
							:key="index"
							:type="success"
							color="#0bbd87"
							size="large"
							:timestamp="activity.intro"
							>
							<div class="activity_content">
								<el-link type="primary" :href="activity.href">{{ activity.name}}</el-link>
							</div>
							
						</el-timeline-item>
					</el-timeline>
				</div>  
				</el-col>
				<el-col :span="6">
				<div class="grid-content ep-bg-purple-light" >
					<el-divider>
						<el-icon size="50">
								 <sc-icon-Other  />
						</el-icon>
						<label class="t_label">其他...</label>
					</el-divider>
					
					  <el-timeline>
						<el-timeline-item center
							v-for="(activity, index) in others"
							:key="index"
							:type="success"
							color="#0bbd87"
							size="large"
							:timestamp="activity.intro"
							>
							<div class="activity_content">
								<el-link type="primary" :href="activity.href">{{ activity.name}}</el-link>
							</div>
							
						</el-timeline-item>
					</el-timeline>
				</div>  
				</el-col>
  			</el-row>
		</el-main>
		<el-footer>
			<div style="text-align:center">
				&copy;linrk.cn
			</div>
			
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		name: '那些年，我奋斗过的产品...',
		data() {
			return {
				healths:[],
				traffices:[],
				others:[],
				polices:[]
			}
		},
    mounted() {
      this.getPolices();
      this.getHealths();
	  this.getTraffices();
	  this.getOthers();
    },
		methods: {
			goIn() {
				this.$router.replace({
					path: '/appList'
				})
			},
      async getPolices(){
        const type = {type:"police"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.polices = res.data;
      },
      async getHealths(){
        const type = {type:"health"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.healths =res.data;
      },
      async getTraffices(){
        const type = {type:"traffic"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.traffices =res.data;
      },
	  async getOthers(){
        const type = {type:"other"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.others =res.data;
      }
		},
	}
</script>

<style>
.el-row {
	margin: 5px;
}
.el-timeline{
	margin-top: 20px;
}
.el-divider{
	width: 80%;
}
.t_label{
	padding-left: 10px;
	font-size: medium;
	font-weight: bolder;
}
.el-link{
	font-size: medium;
	font-weight: bold;
}
</style>